<template>
  <div class="login">
    <div class="login-center">
      <ul class="logo">
        <li><span>雪月</span></li>
        <li>
          <div>后台管理系统</div>
          <div>BACKROUND MANACEMENT CENTER</div>
        </li>
      </ul>
      <ul class="login-right">
        <li class="login-li1">
          <div href="javascript:;">
            <em></em>
            <i>SIGN IN</i>
          </div>
          <div href="javascript:;">
            <a href="javascript:;" :plain="true" @click="login">登录</a>
            <em></em>
          </div>
        </li>
        <el-form :model="user" :rules="rules" ref="user">
          <el-form-item prop="username">
            <li class="login-user">
              <span>
                <em></em>
              </span>
              <el-input
                type="text"
                v-model="user.username"
                placeholder="请输入用户名"
              />
            </li>
          </el-form-item>
          <el-form-item prop="password">
            <li class="login-pass">
              <span>
                <em></em>
              </span>
              <el-input
                type="password"
                v-model="user.password"
                placeholder="请输入密码"
                @keydown.native.enter="login"
              />
            </li>
          </el-form-item>
        </el-form>
        <li class="login-login">
          <el-button type="primary" round class="btn" @click="login"
            >登 录</el-button
          >
        </li>
        <li class="login-state">
          <input type="checkbox" class="checkbox" />
          <em>保持登录状态</em>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    const validateUser = (rule, value, callback) => {
      const reg = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/gi;
      if (reg.test(value)) {
        callback();
      } else {
        callback(new Error("请输入正确的账号！"));
      }
    };
    const validatePass = (rule, value, callback) => {
      // 密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)
      const reg = /^\w{1,6}$/gi;
      if (reg.test(value)) {
        callback();
      } else {
        callback(new Error("请输入正确的密码！"));
      }
    };
    return {
      user: {
        username: "",
        password: "",
      },
      rules: {
        username: [{ validator: validateUser, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }],
      },
    };
  },
  methods: {
    login() {
      this.$refs["user"].validate(async (valid) => {
        if (valid) {
          const rst = await this.$http.post("login", this.user);
          //当状态为200则表示登录成功
          if (rst.meta.status != 200) {
            this.$message({
              type: "info",
              message: rst.meta.msg,
            });
          } else {
            this.$message.success('登陆成功！');
            // 将token信息保存到sessionStorage中
            window.sessionStorage.setItem("token", rst.data.token);
            // 跳转到Home.vue组件中
            this.$router.replace("/home");
          }
        }
      });
    },
  },
};
</script>
<style scoped>
@import url(../assets/css/login.css);
.el-form .el-form-item {
  margin-bottom: 10px;
}
.login-login{
  margin-top: 30px;
}
</style>
